<template>
  <a-row :gutter="10">
    <a-col :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="用户电话" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-input  v-model="financeForm.phone" placeholder="请输入用户手机号"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="10" :sm="8">
                <a-form-item label="申请时间" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-range-picker @change="onChange" v-model="financeForm.time" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item label="状态" :labelCol="{ span: 4 }" :wrapperCol="{ span: 18 }">
                  <a-select :value="statusValue" placeholder="请选择状态" @change="onStatusChange">
                    <a-select-option v-for="item in statusOptions" :key="item.value" :value="item.value">
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="margin: 10px 10px 14px 83px">
          <a-button type="primary" ghost @click="selectInfo">查询</a-button>
          <a-button type="primary" ghost @click="resetForm">重置</a-button>
          <a-button type="primary" ghost @click="Export" v-has="'finance:export'">导出</a-button>
          <a-button type="primary" ghost >批量转款</a-button>
          <a-button type="primary" ghost @click="batchRefuseStatus">批量拒绝</a-button>
        </div>
        <div>
          <a-tabs default-active-key="1">
            <a-tab-pane key="1">
              <span slot="tab" @click="getList(1)">
                提现申请
              </span>
            </a-tab-pane>
            <a-tab-pane key="2">
              <span slot="tab" @click="getList(4)">
                提现成功
              </span>
            </a-tab-pane>
            <a-tab-pane key="3">
              <span slot="tab" @click="getList(3)">
                提现失败
              </span>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div style="margin-top: 15px">
          <a-table
            style="height:500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          >
            <span slot="action" slot-scope="next, record">
              <a @click="transfer(record)">转款</a>
              <a-divider type="vertical" />
              <a @click="refuseStatus(record)">拒绝</a>
            </span>
          </a-table>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>

import { jbdFinaceList,jbdFinaceListStatus,JbdWithdrawalXls } from '@/api/finance'
export default {
  name: 'RoleUserList',
  components: {},
  data() {
    return {
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      selectedRowKeys: [],
      rightcolval: 0,
      columns: [
        {
          title: '申请人',
          align: 'center',
          dataIndex: 'createBy'
        },
        {
          title: '提现账户',
          align: 'center',
          dataIndex: 'bankCard'
        },
        {
          title: '银行卡姓名',
          align: 'center',
          dataIndex: 'bankName'
          },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '审核时间',
          align: 'center',
          dataIndex: 'approvedTime'
        },
        {
          title: '提现金额',
          align: 'center',
          dataIndex: 'balance'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      financeForm: {
        phone: '',
        time: [],
        status: '',
      },
      statusOptions: [
        {
          value: '1',
          label: '待审核'
        },
        {
          value: '4',
          label: '提现成功'
        },
        {
          value: '5',
          label: '提现失败'
        }
      ], // 线索状态数据
      statusValue: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async editStatus(data) {
      const res = await jbdFinaceListStatus(data);
      if (res.code == 200) {
        this.$message.success('操作成功');
        this.getList()
      } else {
        this.$message.error('服务器异常');
      } 
    },
    async getList(value) {
      let data = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        createTime: this.financeForm.time[0], // 创建日期
        updateTime: this.financeForm.time[1], // 创建日期
        status: value
      };
      const res = await jbdFinaceList(data);
      if (res.code == 200) {
        this.dataSource = res.result.records;
        this.ipagination.total = res.result.total;
      }  
    },
    onChange(date, dateString) {
      console.log(date, dateString)
    },
    handleTableChange(e) {
      this.ipagination.current = e.current;
      this.ipagination.pageSize = e.pageSize;
      this.getList();
    },
    onStatusChange(value) {
      console.log(value);
      this.financeForm.status = value
      this.statusValue =  this.statusOptions[value-1].label
    },
    selectInfo() {
      this.getList()
    },
    resetForm() {
      // 表单重置
      this.$set(this.financeForm,'phone','')
      this.$set(this.financeForm,'time', [])
      this.$set(this.financeForm,'status','')
      this.typeValue = []
      this.statusValue = []
      this.getList()
    },
    // 拒绝
    refuseStatus(value) {
      let salf = this;
      console.log(value);
      this.$confirm({
        title: '提示',
        content: '确定要拒绝吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          let data = {
            id: value.id,
            status: 3
          }
          salf.editStatus(data);
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    // 转款
    transfer(value) {
      let data = {
        id: value.id,
        status: 4
      }
      this.editStatus(data);
    },
    Export() {
      const token = JSON.parse(window.localStorage.getItem('pro__Access-Token')).value;
      const selections = this.selectedRowKeys.toString()
      window.open(
        `https://jbd.iminggu.com/jeecg-boot/jbd/jbdWithdrawal/exportXls?selections=${selections}&token=${token}`
      );
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      console.log(this.selectedRowKeys);
    },
    // 批量拒绝
    batchRefuseStatus() {
      let salf = this;
      this.$confirm({
        title: '提示',
        content: '确定要拒绝吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          salf.selectedRowKeys.forEach((item) => {
            let data = {
              id: item,
              status: 3
            }
            salf.editStatus(data);
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    batchTransfer() {
      this.selectedRowKeys.forEach((item) => {
        let data = {
          id: item,
          status: 4
        }
        this.editStatus(data);
      })
    }
  }
}
</script>
<style scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
.pagin {
  padding-left: 1000px;
}
</style>
